<script lang="ts" setup>
import { ListCourseWithPrice, ListCourse } from "@/types/course";
import { getOSSURL } from "@/utils/utils";
import { useRouter } from "vue-router";
import { isIOS, isMiniProgram } from "@/utils/mini-program";

const props = defineProps<{
  course: ListCourseWithPrice | ListCourse;
  category: string;
}>();

const router = useRouter();

/** 跳转到课程详情 */
const gotoDetail = () => {
  router.push(`/course/${props.course.id}`);
};

const cantBuy = isIOS() && isMiniProgram();
</script>

<template>
  <div v-if="category === 'mine'" class="bg-white p-3 b-b-1 b-b-solid b-gray-3" @click="gotoDetail">
    <nut-row :gutter="16">
      <nut-col span="9">
        <nut-image class="w-full h-24 rounded-lg overflow-hidden" :src="getOSSURL(course.courseCoverUrl)" fit="cover" />
      </nut-col>
      <nut-col span="15" class="h-24 flex flex-col">
        <h3>{{ course.courseName }}</h3>
        <!-- 标签 -->
        <div v-if="course.tags?.length" class="mt-1 flex gap-1 items-center flex-wrap">
          <span v-for="tag in course.tags" :key="tag" class="px-1 text-xs c-blue-5 b-1.5 b-solid b-blue-3 rd-1.5">{{ tag }}</span>
        </div>
      </nut-col>
    </nut-row>
  </div>

  <div v-else class="bg-white rd-2 of-hidden c-gray-7 shadow" @click="gotoDetail">
    <nut-image class="w-full" :src="getOSSURL(course.courseCoverUrl)" fit="cover" />
    <div class="px-2 py-1">
      <div class="flex items-center gap-1">
        <!-- vip -->
        <span v-if="(course as ListCourseWithPrice).price" class="shrink-0 px-1 bg-blue-5 c-white font-b font-ys text-xs rd-1">{{
          cantBuy ? "精品" : "VIP"
        }}</span>
        <span v-else class="shrink-0 px-1 bg-yellow-5 c-white font-b font-ys text-xs rd-1">免费</span>
        <!-- 商品名称 -->
        <span class="grow w-0 truncate">{{ course.courseName }}</span>
      </div>

      <!-- 标签 -->
      <div class="mt-1 flex gap-1 items-center flex-wrap">
        <span v-for="tag in course.tags" :key="tag" class="px-1 text-xs c-blue-5 b-1.5 b-solid b-blue-3 rd-1.5">{{ tag }}</span>
      </div>

      <!-- 价格 -->
      <div class="mt-2 flex justify-end">
        <div class="text-xs" v-if="!cantBuy">
          ￥<span class="text-lg">{{ (course as ListCourseWithPrice).price / 100 }}</span>
        </div>
        <div v-else class="h-2"></div>
      </div>
    </div>
  </div>
</template>
